<template>
  <div class="cart">
    <section class="lineTop lineBottom bgWhite cartList">
      <h3 class="lineBottom dispBox p10 relative f15">
        <span class="sel_shop">
          <i class="selIcon">
            <b></b>
            <b></b>
          </i>
        </span>
        <div class="box-flex1 lineh_25 c3">
          <p class="fl relative pr15">
            <!-- <img src="../img/shopIcon.png" width="15" /> 可口可乐专场 -->
            可口可乐专场
          </p>
        </div>
        <a href="javascript:void(0);" class="getCoupons pr10">领券</a>
      </h3>
      <div v-for = "item in productList" class="dispBox m0_10 p10_0 lineBottom">
        <div class="mr10 mt30">
          <i class="selIcon" v-bind:class = "{'touchMBg':item.checked}" @click="selectedProduct(item)">
            <b></b>
            <b></b>
          </i>
        </div>
        <div class="proImg linebox mr10">
          <img :src="item.productImage" />
        </div>
        <div class="box-flex1 relative">
          <h4>{{ item.productName }}</h4>
          <h5 class="c9 lineh_25">赠送:<span>{{ item.parts.partName }}</span></h5>
          <em class="subColor f15">&yen;{{ item.productPrice | formatMoney }}</em>
          <div class="amount">
            <a href="javascript:void(0)" class="fa fa-minus" v-on:click = "changeMoney(item,-1)"></a>
            <input type="number" id="" value="0" v-model="item.productQuentity"/>
            <a href="javascript:void(0)" class="fa fa-plus" v-on:click = "changeMoney(item,1)"></a>
          </div>
          <div>总金额：{{ item.productPrice * item.productQuentity | my-filter(' 元') }}</div>
          <div class="delIcon"></div>
        </div>
      </div>
      <div class="freeShipping relative">
        <span class="c9">200元包邮已免邮费</span>
      </div>
    </section>
    <section class="totalMoney bgWhite lineTop dispBox c6">
      <div class="mr10 mt15 ml10" id="selectAll">
        <i class="selIcon" :class = "{'touchMBg':checkedAllFlag}" @click="checkedAll()">
          <b></b>
          <b></b>
        </i> 全选
      </div>
      <div class="box-flex1 totalMoneynum">
        <b class="f17">小计</b>
        <span class="subColor">
          <b class="f15">&nbsp;¥&nbsp;</b>
          <b class="f17 bold">{{totalMoney}}</b>
        </span><br>
        <em class="f10">不含邮费</em>
      </div>
      <a href="javascript:void(0);" class="mainBg white f17 gotoJiesuan">去结算(21)</a>
    </section>
  </div>
</template>

<script>
import Vue from 'vue'
export default {
  name: 'cart',
  data () {
    return {
      totalMoney: 0,
      productList: [],
      checkedAllFlag: false,
      sum: 0
    }
  },
  filters: {
    formatMoney: function (value) {
      return value.toFixed(2)
    }
  },
  mounted () {
    this.$nextTick(function () {
      this.cartView()
    })
  },
  methods: {
    cartView: function () {
      // http://3g.163.com/touch/jsonp/sy/recommend/0-9.html
      // http://news-at.zhihu.com/api/4/news/latest
      // this.$jsonp('http://3g.163.com/touch/jsonp/sy/recommend/0-9.html', data => {
      this.$http.get('/api/goods/').then(response => {
        this.productList = response.data.data.result.list
      }, error => {
        console.log(error)
      })
    },
    changeMoney: function (item, way) {
      if (way > 0) {
        item.productQuentity++
      } else {
        item.productQuentity--
        if (item.productQuentity < 1) {
          item.productQuentity = 1
        }
      }
      this.calcTotalPrice()
    },
    selectedProduct: function (item) {
      // let _this = this
      if (typeof item.checked === 'undefined') {
        // 全局注册
        // Vue.set(item, 'checked', true)
        // 局部注册
        this.$set(item, 'checked', true)
        this.sum += 1
      } else {
        item.checked = !item.checked
        if (item.checked === true) {
          this.sum += 1
        }
        if (item.checked === false) {
          this.checkedAllFlag = false
          this.sum -= 1
        }
      }
      // 是否显示全选 其中一项没选中 不全选 所有列表选中为全选
      // console.log(this.sum)
      if (this.sum === this.productList.length) {
        this.checkedAllFlag = true
      }
      this.calcTotalPrice()
    },
    checkedAll: function () {
      this.checkedAllFlag = !this.checkedAllFlag
      let _this = this
      this.productList.forEach(function (item, index) {
        if (typeof item.checked === 'undefined') {
          _this.$set(item, 'checked', _this.checkedAllFlag)
        } else {
          item.checked = _this.checkedAllFlag
        }
      })
      this.calcTotalPrice()
    },
    calcTotalPrice: function () {
      let _this = this
      this.totalMoney = 0
      this.productList.forEach(function (item, index) {
        if (item.checked) {
          _this.totalMoney += item.productPrice * item.productQuentity
        }
      })
    }
  }
}
// 注册
Vue.filter('my-filter', function (value, type) {
  // 返回处理后的值
  // console.log(typeof value) //number
  return value.toFixed(2) + type
})
</script>